<template>
    <view class="page">
        <view class="content">
            <view class="box">
                <text style="font-size: 18px;font-weight: bold;color: #000">免费加入房满租</text>
                <u-form :model="form" ref="uForm">
                    <u-form-item>
                        <u-input v-model="form.tel" placeholder="请输入手机号" border="surround"></u-input>
                    </u-form-item>

                    <u-form-item>
                        <u-input v-model="form.code" placeholder="请输入验证码" border="surround">
                            <template slot="suffix">
                                <u-code
                                        ref="uCode"
                                        @change="codeChange"
                                        seconds="60"
                                        changeText="X秒重新获取"
                                ></u-code>
                                <u-button
                                        @tap="getCode"
                                        :text="tips"
                                        type="success"
                                        size="small"
                                ></u-button>
                            </template>
                        </u-input>
                    </u-form-item>

                    <u-form-item @click="clickHouseType">
                        <u-row>
                            <u-input v-model="text" disabled placeholder="请选择城市" border="surround"></u-input>
                        </u-row>
                        <u-picker :show="showHouseType" :columns="houseTypeColumns" :loading="loading"
                                  @change="changeHandler" ref="uPicker" keyName="name"
                                  @confirm="houseTypeConfirm" @cancel="cancelHouseType"></u-picker>
                    </u-form-item>

                    <u-form-item>
                        <u-button type="primary" text="限时免费加入" @click="nextHandler"></u-button>
                    </u-form-item>
                </u-form>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "apply",
        data() {
            return {
                loading:false,
                showHouseType:false,
                text:'',
                tips: '',
                houseTypeColumns:[
                    [{id:'', name:'请选择', code: ''}],
                    [{id:'', name:'请选择', code: ''}],
                    [{id:'', name:'请选择', code: ''}],
                ],
                form: {
                    type: '',
                    u_id: uni.getStorageSync('u_id'),
                    tel: '',
                    code: '',
                    city_code:'',
                    area_code:'',
                    province_code:'',
                }
            }
        },
        onLoad(options){
            this.form.type = options.type;

            let array = [];
            uni.$u.http.get('/api.php/index/area_list', {params: {type: 1}}).then(res => {
                for (let i = 0; i < res.length; i++) {
                    array.push({
                        id:res[i].PROVINCE_ID,
                        name:res[i].PROVINCE_NAME,
                        code: res[i].PROVINCE_CODE
                    });
                }
            });
            this.houseTypeColumns[0] = array;
        },
        methods:{
            codeChange(text) {
                this.tips = text;
            },

            getCode() {
                if (this.$refs.uCode.canGetCode) {
                    console.log(this.form.tel);
                    if (!uni.$u.test.mobile(this.form.tel)) {
                        uni.$u.toast('请输入正确的手机号');
                        return;
                    }
                    uni.showLoading({title: '正在获取验证码'});
                    // 向后端请求验证码
                    uni.$u.http.post('/api.php/index/tel_code', {tel: this.form.tel}).then(res => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    });
                } else {
                    uni.$u.toast('倒计时结束后再发送');
                }
            },

            nextHandler(){
                uni.showLoading({title: '正在提交'});
                uni.$u.http.post('/api.php/UserClinet/user_apply', this.form).then(res => {
                    uni.hideLoading();
                    uni.$u.toast('提交成功');
                    uni.navigateBack({
                        delta: 1,
                    });
                });
            },

            clickHouseType(){
                this.showHouseType = true;
                uni.hideKeyboard();
            },
            houseTypeConfirm(e) {
                this.form.province_code = e.value[0].code;
                this.form.city_code = e.value[1].code;
                this.form.area_code = e.value[2].code;
                this.text = e.value[0].name + '/' + e.value[1].name + '/' + e.value[2].name;
                this.cancelHouseType();
            },
            cancelHouseType(){
                this.showHouseType = false;
            },

            changeHandler(e) {
                const {
                    columnIndex,
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                if (columnIndex === 0) {
                    this.loading = true

                    let array = [{id:'', name:'请选择', code: ''}];
                    uni.$u.http.get('/api.php/index/area_list', {params: {type: 5,code:this.houseTypeColumns[0][index].code}}).then(res => {
                        for (let i = 0; i < res.length; i++) {
                            array.push({
                                id:res[i].CITY_ID,
                                name:res[i].CITY_NAME,
                                code: res[i].CITY_CODE
                            });
                        }
                    });
                    this.houseTypeColumns[1] = array;
                    picker.setColumnValues(1, array);
                    this.loading = false

                }else if(columnIndex === 1){
                    this.loading = true

                    let array = [{id:'', name:'请选择', code: ''}];
                    uni.$u.http.get('/api.php/index/area_list', {params: {type: 6,code:this.houseTypeColumns[1][index].code}}).then(res => {
                        for (let i = 0; i < res.length; i++) {
                            array.push({
                                id:res[i].AREA_ID,
                                name:res[i].AREA_NAME,
                                code: res[i].AREA_CODE
                            });
                        }
                    });
                    this.houseTypeColumns[2] = array;
                    picker.setColumnValues(2, array)
                    this.loading = false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }
    .content{

    }
    .box{
        width: calc(100vw - 80px);
        margin: 30px auto;
        padding: 30rpx;
        text-align: center;
        box-shadow: 0 0 10rpx #c1c1c1;
    }
</style>